<template>
    <div>

        <a-row>
            <a-row class='mytitle'>
                {{ 'OAuth2 ' + $t('Service') }}
            </a-row>
            <a-card class="margin">
                <div class="tips border-primary j-border-radius-sm  pt-10 pb-10 pl-10 pr-20 mt-10 tipstyle flex">
                    <Iconfont class="icon pt-4 pr-4" type="a-16_f_ic_about" style="color: #2d74ff; margin-top: 10px;"></Iconfont>
                  <div>
                    <div>{{ '1、' + $t('当前支持超级/系统管理员注册、编辑、删除 OAuth2 客户端。运维人员、审计人员仅支持查看客户端信息。') }}</div>
                    <div>{{ '2、' + $t('最多支持注册 10 个 OAuth2 客户端。') }}</div>
                  </div>
                </div>
                <div class="mt-24">
                    <a-button type='primary' v-userAuth="'I2-2'" @click="handleCreate" style="width: 100px;">
                        {{ $t('Create') }}
                        <!-- <Iconfont class="icon button-icon-style" type="icon-new16f"></Iconfont>{{ $t('注册客户端') }} -->
                    </a-button>
                </div>

                <a-table class="bigstyle mt-16" rowKey="remote_cluster_name" :columns='columns' :loading="loading"
                    :dataSource='dataList' :locale="defaultSetting" :pagination='pagination' size='small'
                    :scroll="{ x: 1200 }">

                    <template slot="operate" slot-scope='text, record'>
                        <div style="display: flex;">
                            <span class="j-text-main cursor-pointer" v-userAuth="'I2-1'" @click="handleView(record)">{{ $t('View') }}</span>
                            <span  class="ml-8 j-text-main cursor-pointer"  v-userAuth="'I2-3'"  @click="handleEdit(record)">{{ $t('Edit') }}</span>
                            <span  class="ml-8 j-text-red cursor-pointer"  v-userAuth="'I2-4'" @click="handleDelete(record.name, record.id)">{{ $t('Delete') }}</span>

                        </div>
                    </template>
                </a-table>
            </a-card>
        </a-row>

        <Add ref="addDialog" @get-list="getList" />
        <Edit ref="editDialog" @get-list="getList" />
        <ToView ref="viewDialog" :detailList="detailList"/>

    </div>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'
import Add from './certificatonService/add.vue';
import Edit from './certificatonService/edit.vue'
import ToView from './certificatonService/view.vue'

export default {
    name: 'certificationService',
    components: { Add, Edit, ToView },
    data() {
        return {
            loading: false,
            cluster_name: '',
            dataList: [],
            strategyOption: [],
            copyList: [],
            defaultSetting: { emptyText: <EmptyData /> },
            pagination: {
                defaultPageSize: 10,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger: true,
                pageSizeOptions: ['10', '20', '30', '40', '50', '100',],
                // pageSizeOptions: ['10', '20', '30', '40', '50', '100', '0'],
                onChange: this.onPageChange,
                onShowSizeChange: this.handlePageChange,
                buildOptionText: (props) => {
                    let text
                    if (props.value == '0') text = '全部'
                    else text = `${props.value} / ${this.$t('page')}`
                    return text
                }
            },
            columns: [
                { title: this.$t('Client') + this.$t('名称'), dataIndex: 'name', key: 'name', fixed: 'left', scopedSlots: { customRender: 'name' } },
                { title: this.$t('Client') + 'URL', dataIndex: 'client_url', key: 'client_url',  },
                { title: this.$t('回调') + 'URL', dataIndex: 'redirect_uri', key: 'redirect_uri',  },
                { title: this.$t('Operate'), key: "operate", scopedSlots: { customRender: 'operate' }, width: 200, fixed: 'right' }
            ],

            detailList: {}
      
        };
    },
    mounted() {
        this.getList()
    },
    methods: {
        async getList() {
            this.loading = true
            this.dataList.push({ client_name: '1', client_uri: '1' },{ client_name: '2', client_uri: '3' })
            const { data } = await this.$api.systemSettings.getCretificationApi()
            this.dataList = data
            this.loading = false
        },
        async handlePageChange(current, pageSize) {
            if (pageSize === 0) pageSize = 200
            this.pageSize = pageSize
        },
        async onPageChange(page, pageSize) {
            console.log('changepage', page, "changesize", pageSize)
        },

        async handleView(item) {
            const { data } = await this.$api.systemSettings.getCretificationDetailApi(item.id)
            console.log("data", data)
            this.$refs.viewDialog.isShow = true
            this.detailList = { ...data}
        },
        handleCreate() {
            this.$refs.addDialog.isShow = true
        },
        handleEdit(item) {
            this.$refs.editDialog.isShow = true
            this.$refs.editDialog.form = { ...item}
        },

        handleDelete(name, id) {
            this.loading = true
            let _this = this
            this.$confirm({
                title: this.$t('Delete') + this.$t('Client'),
                content: this.$t('Delete') + this.$t('Client') + ` ${name} ` + this.$t('后，将无法恢复！您确定要删除吗？'),
                cancelText: this.$t('Cancel'),
                okText: this.$t('Sure'),
                okType: 'danger',
                icon: 'close-circle',
                async onOk() {
                    const { data } = await _this.$api.systemSettings.delCretificationApi(id)
                    _this.model(data.id) //返回模板
                    _this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag == '0') _this.getList()
                },
                onCancel() {
                }
            })
            this.loading = false
        },

    }
}
</script>
<style scoped>
.tipstyle {
    background-color: #cad5ff;
    border-color: #8ca3ff;
}
</style>